<template>
	<view class="content tabs">
		<div class="uni-padding-wrap uni-common-mt card-list">
			<view class="card-tab">

				<div class="card-row-one">

					<view class="first_line">
						<text class="first_line_text">卡号/日期</text>
						<text class="first_line_text">状态/金额</text>
					</view>
					<view v-for="m in accordion" :key="m.id" title="123" class="list_item" @click="gotoDetail(m.id)">
						<div class='flex-box-left' :style="{width: m.cardNumber.indexOf('暂无订单')>-1?'100%':'41%'} ">
							<div class='flex-box-left-block'>{{m.cardNumber}}</div>
							<div class="font-grey flex-box-left-block">{{m.insertTimeDate}}</div>
						</div>
						<div class='flex-box-right' style="margin-right: 40upx;" v-if="m.setMealName!=null&&m.setMealName!=''">
							<div class="flex-box-right-up">{{m.dictStatusName}}</div>
							<div class="font-grey flex-box-right-down" >{{m.setMealName}}/{{m.price}}元</div>
						</div>
						<i class="ali-icon deatil-icon" v-if="m.setMealName!=null&&m.setMealName!=''">&#xe642;</i>
					
					</view>
				</div>
			</view>
		</div>
	</view>
</template>

<script>
	import sdSegmentedControl from '@/components/sd-segmented-control/uni-segmented-control.vue'
	import sdCollapse from '@/components/sd-collapse/uni-collapse.vue'
	import sdCollapseItem from '@/components/sd-collapse-item/uni-collapse-item.vue'
	export default {
		components: {
			sdCollapse,
			sdCollapseItem,
			sdSegmentedControl
		},
		data() {
			return {
				//卡数据url
				getCustomerOrderList: '/customer-order/customerList',
				loadMoreText: "加载中...",
				showLoadMore: true,
				animationData: null,
				page: {
					size: 10,
					current: 1
				},
				timerList: [],
				accordion: [{
					cardNumber: '努力加载中·····',
					insertTimeDate: '',
					setMealName: '',
					id: ""
				}]
			};
		},
		onLoad(){
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
		　　		WeixinJSBridge.invoke('setFontSizeCallback', {
			　　		'fontSize': 0
			　　});
			　　// 重写设置网页字体大小的事件
			　　WeixinJSBridge.on('menu:setfont', function () {
			　　　　WeixinJSBridge.invoke('setFontSizeCallback', {
			　　　　　　'fontSize': 0
			　　　　});
			　　});
			　
			};
		
		},
		onReachBottom() {
			this.showLoadMore = true;
			this.page.current++
			setTimeout(() => {
				this.initData();
			}, 300);
		},
		onPullDownRefresh() {
			this.page = {
				size: 10,
				current: 1
			}
			this.accordion = []
			this.initData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			console.log('---------onshow----->>>>cardId='+this.cardId+'-------------')
			let that = this
			uni.getStorage({
				key: 'orderCardId',
				success: function(res) {
					that.cardId = res.data
					console.log('-------------cardId='+that.cardId+'------------')
				}
			});
			
			if(that.cardId===undefined)that.cardId = '';
			console.log('getStorage===>'+that.cardId);
			this.accordion = [{
				cardNumber: '努力加载中·····',
				insertTimeDate: '',
				setMealName: '',
				id: ""
			}]
			this.initData();
			uni.getStorage({
				key: 'orderCardId',
				success:function(v){
					console.log(v.data)
				},
			})
		},
		onBackPress() {
			uni.navigateBack({
				delta: 1
			});
		},
		onUnload() {
			this.page = {
				size: 10,
				current: 1
			}
			this.accordion = []
			this.showLoadMore = false;
		},
		onHide(){
			uni.setStorage({
				key: 'orderCardId',
				data: '',
				success: (v) => {
					console.log(v.data)
				}
			})
		},
		methods: {
			initData() {
				let _this = this;
				console.log('cardId='+ this.cardId)
				this.$req.userData(this.getCustomerOrderList, {
						page: this.page,
						cardId: this.cardId
					})
					.then(v => {
						
						if (this.page.current == 1) {
							this.accordion = []
						}
						if (v.data.records.length != 0) {
							v.data.records.forEach(obj => {
								let order = {}
								order.cardNumber = obj.cardNumber
								order.insertTimeDate = obj.insertTimeDate
								order.setMealName = obj.setMealName
								order.dictStatusName = obj.dictStatusName
								order.price = obj.price
								order.id = obj.id
								this.accordion.push(order)
							})
						} else if (this.page.current == 1) {
							this.accordion.push({
								cardNumber: '暂无订单，快去下单吧！',
								insertTimeDate: '',
								setMealName: ''
							})
							uni.stopPullDownRefresh()
						}
					})
			},
			gotoDetail(id) {
				if (id != '') {
					uni.navigateTo({
						url: '/pages/tabbar/rechargeRecord/orderDetail?id=' + id
					});
				}
			}

		}
	};
</script>
<style lang="scss">
	@import '@/uni.scss';

	

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
	}

	.scroll-h {
		width: 750rpx;
		height: 80rpx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	.text {
		margin: 16rpx 0;
		width: 100%;
		background-color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #555;
		border-radius: 8rpx;
	}

	.content {
		text-align: center;
		/* height: 400upx; */
		background-color: $theme-color !important;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	.card-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.card-tab {
		position: relative;
		background-color: #FFFFFF;
		width: 90%;
		border-radius: 5px;
		margin-top: 25upx;
		overflow: hidden;
		// padding: 20upx;
	}

	.card-row-one {
		display: flex;
		flex-direction: column;
		font-size: small;

		// justify-content: space-between;
		.first_line {
			width: 90%;
			height: 100rpx;
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			justify-items: center;
			align-items: center;
			padding: 0 5%;

		}

		.first_line_text {
			width: auto;
			height: auto;
			line-height: 36upx;
			background-color: #78a8f2;
			border-radius: 12rpx;
			color: #FFFFFF;
			letter-spacing: 3rpx;
			text-align: center;
			padding: 12upx 20upx;
			opacity: 0.8;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			// font-size: 36upx;
		}
	}


	.card-number {
		display: flex;
		color: $font-bule-color;
		margin-left: 10px;
		font-weight: bold;
		letter-spacing: 2upx;
		width: 75%;
	}

	.card-status {
		border-radius: 8px;
		height: 36upx;
		color: white;
		width: 180upx;
		margin-right: 0px;

		display: flex;
		justify-content: center;
		align-items: center;

	}





	.card-row-tow {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;

		.card-four-number {
			font-size: 35upx;
			text-align: left;
		}

		.card-mb {
			display: flex;
			flex-direction: column;
			
		}

		.card-four-font {
			color: $font-grey-color;
			font-size: small;
			text-align: left;
			font-size: 22rpx;
		}
	}

	.card-row-three {
		display: flex;
		justify-content: space-between;
		margin-top: 5upx;

		.three-balance {
			font-size: medium;
		}

		.recharge-button {
			font-size: small;
			width: 120upx;
			background-color: $theme-color;
			color: white;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.card-row-four {
		position: relative;
		width: 100%;
		height: 105upx;
		display: flex;
		align-items: center;

		.four-left {
			font-size: small;
			position: absolute;
			left: 0px;
			width: 240upx;
			text-align: left;



		}

		.four-right {
			display: flex;
			position: absolute;
			right: 0px;
			font-size: 20upx;

			color: $theme-color;
		}

		.four-btn {
			margin-left: 28px;

		}

		.btn-size {
			font-size: 21px;
		}

		.btn-color {

			color: $theme-color;


		}

		.btn-blue {
			color: #007AFF !important;

		}
	}

	.card-row-five {
		display: flex;
		justify-content: flex-end;
		margin-top: 5px;

		uni-button {

			margin-right: 0px;
			margin-left: 10px;

		}
	}

	.card-btn {
		border-radius: 8px;
		height: 35upx;

		color: #646464;
		padding-left: 10px;
		padding-right: 10px;
		font-size: small;
		border: 1px solid $font-grey-color;
	}

	.card-recharge-btn {

		@extend .card-btn;
		border: 1px solid $font-bule-color !important;
		color: $font-bule-color !important;
	}

	.card-detail {
		background-color: #ffa648 !important;
		border: 1px solid #ffa648 !important;
		color: white !important;
	}

	.card-copy {
		background-color: #0ac083 !important;
		border: 1px solid #0ac083 !important;
		color: white !important;
	}

	.card-order {
		background-color: #f04806 !important;
		border: 1px solid #f04806 !important;
		color: white !important;

	}

	.line {
		background-color: #f2f2f2;
		height: 1px;
	}

	.ininer-line {
		background-color: $theme-color;
		position: absolute;
		width: 50%;
		height: 1px
	}


	.list_item {
		width: 94%;
		height: auto;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 3%;
		font-size: 0.8rem;
	}
	.flex-box-left{
		width: 41%;
		height: auto;
		display: inline-flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		line-height: 40upx;
	}
	.flex-box-left-block{
		width: 100%;text-align: left;
	}
	.flex-box-right{
		width: 58%;
		height: auto;
		display: inline-flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		line-height: 40upx;
	}
	.flex-box-right-up{
		font-weight: bold;width: 100%;text-align: right;
	}
	.flex-box-right-down{
		width: 100%;text-align: right;overflow: hidden; text-overflow:ellipsis;white-space:nowrap;
	}
	.list_item:nth-child(odd) {
		background-color: #eef5ff;
	}

	.margin-l {
		margin-left: 40rpx;
	}

	.margin-r {
		margin-right: 40rpx;
	}

	.pading-l {
		pading-left: 40rpx;
	}

	.pading-r {
		pading-right: 40rpx;
	}

	.deatil-icon {
		position: absolute;
		right: 1%;
		color: $theme-color;
		font-size: 28rpx;
	}
</style>
